<!-- eslint-disable vue/html-indent -->
<!-- eslint-disable vue/require-v-for-key -->
<template>
  <div ref="dict" class="dicts">
    <el-tooltip v-if="showTooltip" placement="top-start">
      <div slot="content">{{ words.join(',') }}</div>
      <span>{{ words.join(',') }}</span>
    </el-tooltip>
    <template v-else> {{ words.join(',') }} </template>
    <!-- <template v-for="(item, index) in options">
          <template v-if="values.includes(item.value)">
            <span :index="index" :style="{color:item.color}">{{ item.label }}</span>
          </template>
    </template> -->
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      default: () => []
    },
    value: [Number, String, Array]
  },
  data() {
    return {
      showTooltip: false
    }
  },
  computed: {
    values() {
      if (this.value !== null && typeof this.value !== 'undefined') {
        return Array.isArray(this.value) ? this.value : [String(this.value)]
      } else {
        return []
      }
    },
    words() {
      const strArr = []
      this.options?.forEach(i => {
        if (this.values.includes(i.value)) {
          strArr.push(i.label)
        }
      })
      return strArr
    }
  },
  watch: {
    values: {
      handler(newValue, oldValue) {},
      deep: true,
      immediate: true
    }
  },
  mounted() {
    const { scrollWidth, offsetWidth } = this.$refs.dict
    if (scrollWidth > offsetWidth) {
      this.showTooltip = true
    }
  }
}
</script>
  <style scoped>
.dicts {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
span + span {
  margin-left: 10px;
}
</style>
